<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Input - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Input - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content">
      <ion-list>
        <ion-item>
          <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
        </ion-item>

        <ion-item>
          <ion-input placeholder="Placeholder"></ion-input>
        </ion-item>

        <ion-item lines="full" id="fullItem">
          <ion-input id="fullInput" placeholder="Full"></ion-input>
        </ion-item>

        <ion-item lines="inset" id="insetItem">
          <ion-input id="insetInput" placeholder="Inset"></ion-input>
        </ion-item>

        <ion-item lines="none" id="noneItem">
          <ion-input id="noneInput" placeholder="None"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Default Label</ion-label>
          <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Clear Input</ion-label>
          <ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
        </ion-item>

        <ion-item color="dark">
          <ion-label position="floating">Floating</ion-label>
          <ion-input checked></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="fixed">Type #</ion-label>
          <ion-input type="number" value="333"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="stacked">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="stacked">Placeholder</ion-label>
          <ion-input placeholder="Enter Something"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Disabled</ion-label>
          <ion-input id="dynamicDisabled" value="Disabled" disabled></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Readonly</ion-label>
          <ion-input id="dynamicReadonly" value="Readonly" readonly></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Slot</ion-label>
          <ion-input slot="start" value="Start"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Toggle</ion-label>
          <ion-toggle checked slot="end"></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label position="fixed">Type #</ion-label>
          <div type="number" value="333" class="input input-md hydrated">
            <!---->
            <input aria-disabled="false" autocapitalize="none" autocomplete="off" autocorrect="off" autofocus="false" class="native-input native-input-md"
              spellcheck="false" type="number">
            <button type="button" class="input-clear-icon" hidden=""></button>
          </div>
        </ion-item>
      </ion-list>

      <div class="ion-text-center">
        <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
          Toggle Disabled
        </ion-button>

        <ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
          Toggle Readonly
        </ion-button>
      </div>

      <ion-item>
        <ion-label>Clear Input</ion-label>
        <ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Clear On Edit</ion-label>
        <ion-input clear-on-edit value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
      </ion-item>

      <ion-item style="max-width: 250px">
        <ion-input value="Narrow input"></ion-input>
        <ion-label class="ion-text-right">Left</ion-label>
      </ion-item>

      <ion-item style="max-width: 250px">
        <ion-label>Right</ion-label>
        <ion-input class="ion-text-right" value="Narrow input"></ion-input>
      </ion-item>
    </ion-content>

    <script>
      document.querySelector('ion-input').addEventListener('ionBlur', (ev) => { console.log(ev)});

      function toggleBoolean(id, prop) {
        var el = document.getElementById(id);

        var isTrue = el[prop] ? false : true;
        el[prop] = isTrue;
        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
      }
    </script>
  </ion-app>
</body>

</html>
